<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Easing</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>
<script type="text/javascript">
    var data = [ // <-A
			"linear", "cubic", "cubic-in-out", 
			"sin", "sin-out", "exp", "circle", "back", 
			"bounce",
			function(t){ // <-B
				return t * t;
			}
		],
        colors = d3.scale.category10();

    d3.select("body").selectAll("div")
            .data(data) // <-C
        .enter()
        .append("div")
            .attr("class", "fixed-cell")
            .style("position","fixed")
            .style("top", function (d, i) {
                return i * 40 + "px";
            })
            .style("background-color", function (d, i) {
                return colors(i);
            })
            .style("color", "white")
            .style("left", "500px")
            .style("float","none")
            .text(function (d) {
                if(typeof d === 'function') return "custom";  //给那个函数附上字符串
                return d;
            });

    d3.selectAll("div").each(function(d){
        d3.select(this)
			.transition().ease(d) // <-D
			.duration(5000)
			.style("left", "10px");
    });



</script>

</body>

</html>